import sIcon  from '@/assets/images/mapIcons/start.png'
import eIcon  from '@/assets/images/mapIcons/end.png'
import Mapcar from '@/plugin/Map/Mapcar'

class MapRouter{
  constructor({map,...options}){
    this.map = map;
    this.options = options;
    this.colors = ['#909e9e','#02c2d7'];
    this._init();
  }

  _init(){
    this.route = new PathSimplifier({
      map:this.map,
      zIndex:100,
      ...this.options,
      getPath: function(pathData, pathIndex) {
        return pathData.path;
      },
      getHoverTitle: function(pathData, pathIndex, pointIndex) {
        return pathData.name;
      },
      renderOptions: {
        eventSupport:this.options.eventSupport === undefined ? true : this.options.eventSupport,
        pathLineStyle: {
          dirArrowStyle: true
        },
        getPathStyle:(item, zoom) => {
          let color = this.colors[item.pathIndex];
          if (item.pathData.color){
            color = item.pathData.color;
          }

          return {
            pathLineStyle: {
              strokeStyle: color,
              lineWidth: 6
            },
            pathLineSelectedStyle: {
              strokeStyle: color,
            },
            pathLineHoverStyle: {
              strokeStyle: color
            },
            startPointStyle: {
              radius: 5,
              fillStyle: color
            },
            endPointStyle: {
              radius: 5,
              fillStyle: color
            }
          };
        }
      }
    });
  }

  setData(data){
    this.route.setData(data);
  }

  clear(){
    this.route.setData([]);
  }

  setStart(point,options = {}){
    this.startMarker = new AMap.Marker({
      map:this.map,
      position: point,
      zIndex: 101,
      icon: new AMap.Icon({image:sIcon,size:new AMap.Size(21,35),imageSize:new AMap.Size(21,35)}),
      ...options
    });
    this.startMarker.on('mouseover', () => {
      this.startMarker.setTop(true);
    }).on('mouseout', () => {
      this.startMarker.setTop(false);
    });
  }
  setEnd(point,options = {}){
    this.endMarker = new AMap.Marker({
      map:this.map,
      position: point,
      zIndex: 101,
      icon: new AMap.Icon({image:eIcon,size:new AMap.Size(21,35),imageSize:new AMap.Size(21,35)}),
      ...options
    });
    this.endMarker.on('mouseover', () => {
      this.endMarker.setTop(true);
    }).on('mouseout', () => {
      this.endMarker.setTop(false);
    });
  }
  setCar([lng,lat],direction){
    this.carMarker = new Mapcar({
      map:this.map,
      gps:{
        lng,lat,direction
      }
    });
  }
}

export default MapRouter;
